<template>
  <div
    v-if="!initializing"
    class="vc-component vc-app-list-nav-image"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      v-if="dataList && dataList.length > 0"
      class="vc-app-list-nav-image-list"
    >
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-app-list-nav-image-item"
        @click="changeItem(data)" 
      >
        <div class="item-image-box">
          <img class="item-image" v-if='data["图片"]' :src='imageUrl + data["图片"]' alt />
          <cc-icon v-else iconId="018ece4f76dbdc838868" size="60" />
        </div>
        <div>{{data["名称"]}}</div>
      </div>
    </div>
    <div
      v-else
      class="vc-app-list-nav-image-empty"
      :style="visual.parseStyle(compStyle)"
    >
      <span style="margin: 40rpx;">暂无数据</span>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});
const initializing = ref(true);
const currNode = ref(props.node);
const compStyle = ref({});
const dataList = ref([]);
const currValue = ref('');
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  dataList.value = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || []
  await nextTick(() => initializing.value = false);
};

const changeItem = (row) => {
  currValue.value = row['主键id'] || '';
  eventHandler.trigger('点击事件', {'row': row});
};

const getData = () => {
  return { 
    value: currValue.value || '',
    inputParam: currNode.value.inputParam || {} 
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = () => {
  init();
};

onMounted(() => {
  refresh();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-app-list-nav-image {
  width: 100%;
  display: flex;
  flex-direction: row;
  .vc-app-list-nav-image-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    gap: 20rpx;
    padding: 0 20rpx;
    .vc-app-list-nav-image-item {
      white-space: nowrap;
      width: calc(20vw - 24rpx);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-image-box {
        text-align: center;
      }
      .item-image, image {
        max-width: calc(20vw - 24rpx);
        max-height: calc(20vw - 24rpx);
      }
    }
  }
  .vc-app-list-nav-image-list::-webkit-scrollbar {
    display: none;
  }
  .vc-app-list-nav-image-icon {
    width: 60rpx;
    margin-left: 20rpx;
    border-left: 1rpx solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vc-app-list-nav-image-empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>